<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%;"
    max-height="500px"
    :size="detailSize"
    stripe
    class="table-list table-fxied-height"
  >
    <el-table-column type="index" label="序号" width="51" align="center" />
    <el-table-column
      prop="experimentType"
      :show-overflow-tooltip="true"
      :formatter="formatExperimentType"
      label="试验类型"
      min-width="150"
      align="center"
    >
      <template slot-scope="{row}">
        <a href="javascript:;" class="link-type" @click.stop="handleDetail(row.id)">
          <span>{{ formatExperimentType(row.experimentType) }}</span>
        </a>
      </template>
    </el-table-column>
    <el-table-column
      prop="companyName"
      :show-overflow-tooltip="true"
      label="试验单位"
      min-width="150"
      align="center"
    />
    <el-table-column
      prop="clientEnterpriseId"
      :show-overflow-tooltip="true"
      label="委托单位"
      min-width="150"
      align="center"
    />
    <el-table-column
      prop="finishDate"
      :show-overflow-tooltip="true"
      label="完成日期"
      min-width="150"
      align="center"
    />
  </el-table>
</template>

<script>
// 页面接口
import { listExperimentApi } from '@/api/projectManage/ProjectAllocation/testCommission'
export default {
  name: 'AssignCompany',
  props: {
    proId: {
      type: String,
      default: ''
    },
    proName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      TypeOptions: [
        {
          dictValue: '0',
          dictLabel: '标准固结实验'
        },
        {
          dictValue: '1',
          dictLabel: '快速固结实验'
        },
        {
          dictValue: '2',
          dictLabel: '其他'
        }
      ]
    }
  },
  watch: {
    proId: {
      immediate: true,
      handler(value) {
        value && this.getList(value)
      }
    }
  },
  mounted() {
  },
  methods: {
    // 翻译试验类型
    formatExperimentType(experimentType) {
      return this.selectDictLabel(this.TypeOptions, experimentType)
    },
    // 获取列表
    async getList(proId) {
      const { data: { rows }} = await listExperimentApi(proId)
      this.tableData = rows
    },
    // 跳转详情
    handleDetail(id) {
      this.$router.push({
        path: '/newProject/assignCompany-detail',
        query: { id, proName: this.proName, proId: this.proId }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.table-fxied-height {
  max-height: 396px; // 最多10条数据
  overflow-y: scroll;
}
</style>
